<template>
  <div class="gender-container">
    <!-- 标题 -->
    <div class="title">
      <p class="gender-percent">男女比例</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 性别图片 -->
    <div class="gender">
      <div class="man">
        <span>男生</span>
        <img src="../../images/man.png" alt="" />
      </div>
      <div class="woman">
        <span>女生</span>
        <img src="../../images/woman.png" alt="" />
      </div>
    </div>
    <!-- 性别占比描述 -->
    <div class="description">
      <p>男生占比58%</p>
      <p>女生占比42%</p>
    </div>
    <!-- 图表展示容器 -->
    <div ref="genderRef" class="gender-echart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const genderRef = ref();
onMounted(() => {
  const myEchart = echarts.init(genderRef.value);
  myEchart.setOption({
    tooltip: {
      show: true,
    },
    xAxis: { show: false, type: "value" },
    yAxis: { show: false, type: "category" },
    series: [
      {
        type: "bar",
        data: [58],
        barWidth: 20,
        itemStyle: {
          color: "skyblue",
          borderRadius: 20
        },
        z: 2,
        tooltip: {
          valueFormatter: (value: number) => value + "%",
        },
      },
      {
        type: "bar",
        data: [100],
        barWidth: 20,
        barGap: "-100%",
        itemStyle: {
          color: "pink",
          borderRadius: 20
        },
        z: 1,
        tooltip: {
          valueFormatter: (value: number) => value - 58 + "%",
        },
      },
    ],
    grid: {
      width: "330px",
      left: "64px",
      
    },
  });
});
</script>

<style scoped lang="scss">
// 父元素已开启flex布局
.gender-container {
  flex: 1;
  background: url("../../images/dataScreen-main-lc.png");
  background-size: 100% 100%;
  margin: 20px 0px;
  .title {
    .gender-percent {
      color: white;
      font-size: 20px;
    }
  }
  .gender {
    margin-top: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .man {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 111px;
      height: 115px;
      background: url("../../images/man-bg.png") no-repeat;
      background-size: 100% 100%;
    }
    .woman {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 111px;
      height: 115px;
      background: url("../../images/woman-bg.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .description {
    display: flex;
    justify-content: space-around;
    margin: 16px 0px;
    color: white;
  }
  .gender-echart {
    width: 100%;
    height: 28px;
  }
}
</style>
